<template>
  <div class="app-container">
    <div class="sidebar">
      <div class="profile" @click="goToLogin">
        <img src="@/assets/vue.svg" alt="avatar" />
        <div class="login">{{ userName }}<span></span></div>
      </div>

      <ul class="menu">
        <li>
          <router-link to="/home">
            <el-icon :size="20">
              <House />
            </el-icon>首页
          </router-link>
        </li>

        <!-- 用户管理下拉栏 -->
        <li>
          <div class="submenu">
            <div class="submenu-title" @click="toggleUserSubmenu">
              <el-icon :size="20">
                <User />
              </el-icon> 业务管理
              <el-icon :size="20">
                <ArrowUp v-if="userSubmenuOpen" />
                <ArrowDown v-else />
              </el-icon>
            </div>
            <ul v-show="userSubmenuOpen" class="submenu-list">
              <li>
                <router-link to="/user/status">
                  <el-icon :size="20">
                    <Setting />
                  </el-icon> 用户管理
                </router-link>
              </li>
              <li>
                <router-link to="/user/emotion">
                  <el-icon :size="20">
                    <Document />
                  </el-icon> 情绪记录
                </router-link>
              </li>
              <li>
                <router-link to="/user/latestEmotion">
                  <el-icon :size="20">
                    <DocumentRemove />
                  </el-icon> 最新情绪
                </router-link>
              </li>
              <li>
                <router-link to="/user/personalEmotion">
                  <el-icon :size="20">
                    <Reading />
                  </el-icon> 个人情绪
                </router-link>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <div class="submenu">
            <div class="submenu-title" @click="toggleSubmenu">
              <el-icon :size="20">
                <Setting />
              </el-icon> 权限管理
              <el-icon :size="20">
                <ArrowUp v-if="submenuOpen" />
                <ArrowDown v-else />
              </el-icon>
            </div>
            <ul v-show="submenuOpen" class="submenu-list">
              <li>
                <router-link to="/permission/assign">
                  <el-icon :size="20">
                    <Document />
                  </el-icon> 权限分配
                </router-link>
              </li>
              <li>
                <router-link to="/permission/role">
                  <el-icon :size="20">
                    <Setting />
                  </el-icon> 角色权限
                </router-link>
              </li>
            </ul>
          </div>
        </li>
      </ul>

      <!-- 退出登录按钮 -->
      <div class="logout" @click="logout">
        <el-icon :size="20">
          <Setting />
        </el-icon>
        退出登录
      </div>
    </div>

    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { House, User, Message, Setting, Document, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const submenuOpen = ref(false)
const userSubmenuOpen = ref(false) // 用户管理下拉栏状态
const userName = ref()

// 切换权限管理子菜单展开/收起
const toggleSubmenu = () => {
  submenuOpen.value = !submenuOpen.value
}

// 切换用户管理子菜单展开/收起
const toggleUserSubmenu = () => {
  userSubmenuOpen.value = !userSubmenuOpen.value
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}

// 退出登录
const logout = async () => {
  try {
    const response = await axios.get('http://localhost:8181/user/logout')
    if (response.data.code === 200) {
      localStorage.removeItem('token')
      ElMessage.success('退出登录成功')
      router.push('/login')
    } else {
      ElMessage.error('退出登录失败')
    }
  } catch (error) {
    console.error('退出登录请求失败:', error)
    ElMessage.error(error)
  }
}

// 获取登录用户
const getLoginUser = async () => {
  try {
    const response = await axios.get('http://localhost:8181/user/getLoginUser', {
      headers: {
        [localStorage.getItem('tokenName')]: localStorage.getItem('tokenValue'),
      }
    })
    if (response.data.code == 200) {
      localStorage.setItem('user', response.data.data.name)
      userName.value = localStorage.getItem('user')
    }
  } catch (error) {
    ElMessage.error(error)
  }
}
onMounted(() => {
  getLoginUser()
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  background: #f0f2f5;
  box-sizing: border-box;
  display: flex;
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  height: 100vh;
  background: #3f4656;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.profile {
  padding: 20px;
  border-bottom: 2px solid #4e5a6b;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s;
}

.profile:hover {
  background: #4e5a6b;
}

.profile img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #5b6777;
  margin-bottom: 10px;
}

.login {
  color: #a0a8b8;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color 0.3s;
}

.login span {
  font-size: 12px;
  color: #67C23A;
}

.profile:hover .login {
  color: #fff;
}

/* 导航菜单 */
.menu {
  flex: 1;
  list-style: none;
  padding: 15px 0;
  margin: 0;
}

.menu li {
  padding: 12px 25px;
  transition: background 0.3s;
}

.menu li:hover {
  background: #4e5a6b;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu a.router-link-exact-active {
  color: #00aaff;
  font-weight: 500;
}

/* 子菜单样式 */
.submenu {
  cursor: pointer;
}

.submenu-title {
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;

}

.submenu-arrow {
  font-size: 12px;
  color: #a0a8b8;
}

.submenu-list {
  list-style: none;
  padding-left: 30px;
  margin-top: 10px;
}

.submenu-list li {
  padding: 10px 0;
}

.submenu-list li:hover {
  background: #4e5a6b;
}

.submenu-list a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.submenu-list a.router-link-exact-active {
  color: #00aaff;
  font-weight: 500;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  height: 100vh;
  background: #f0f2f5;
  padding: 0px 20px 0px 20px;
}

.custom-icon {
  font-size: 24px;
  /* 强制调整图标大小 */
}

.logout {
  padding: 15px 25px;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-top: 2px solid #4e5a6b;
  transition: background 0.3s;
}

.logout:hover {
  background: #4e5a6b;
}
</style>
